<template>
  <view class="container">
    <!-- 图片选择 -->
    <view class="upload-section" @click="chooseImage">
      <image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="selected-image"/>
      <view v-else class="placeholder">
        <text class="icon">+</text>
      </view>
    </view>

    <!-- 评分组件 -->
    <uni-rate v-model="rating" :max="5" size="24" class="rating"/>

    <!-- 评价内容输入框 -->
    <textarea v-model="comments" placeholder="请输入评价内容"/>

    <!-- 提交按钮 -->
    <button @click="submitReview">提交评价</button>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import {createRating} from "../../api/ratingMG";
import {onLoad} from '@dcloudio/uni-app';
// 请求ID
const requestId = ref()
const show = ref()
onLoad((options) => {
  requestId.value = options.requestId
});
const rating = ref(1) // 默认评分
const comments = ref('') // 默认评论内容
const imageUrl = ref('') // 默认图片URL

const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // 获取选择的第一张图片的临时路径
      imageUrl.value = res.tempFilePaths[0]
    },
    fail: (err) => {
      console.error('选择图片失败', err)
    }
  })
}

const submitReview = async () => {
  // 提交评价的逻辑
  console.log('评分:', rating.value)
  console.log('评价内容:', comments.value)
  console.log('图片URL:', imageUrl.value)
  await createRating({
    "requestIdWbxqy": requestId.value,
    "ratingWbxqy": rating.value,
    "commentsWbxqy": comments.value,
    "imageUrlWbxqy": imageUrl.value
  })
  uni.showToast({
    title: '评论成功!',
    icon: 'success'
  })
  uni.switchTab({
    url: '/pages/user/CarRequestManage/CarRequestList',
  })
  // 可以在这里添加发送数据到服务器的代码
}
</script>

<style>
.container {
  padding: 20px;
}

.upload-section {
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 15px;
}

.placeholder {
  font-size: 40px;
  color: #ccc;
}

.icon {
  font-size: 40px;
  color: #007aff;
}

.selected-image {
  width: 100%;
  height: 100%;
}

.rating {
  margin-bottom: 15px;
}

textarea {
  width: 95%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 15px;
  height: 100px;
}

button {
  background-color: #007aff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
}
</style>
